<template>
  <div>
    <Card>
      <Collapse style="margin-bottom:15px;">
        <Panel>查询
          <div slot="content">
            <Form
              ref="formLkyDocumentTableManage"
              :model="formLkyDocumentTableManage"
              label-position="right"
              :label-width="80"
              inline
            >
              <FormItem label="文件名" prop="file_name">
                <Input type="text" v-model="formLkyDocumentTableManage.file_name" placeholder="文件名"/>
              </FormItem>
              <FormItem label="表类型" prop="table_type">
                <Select v-model="formLkyDocumentTableManage.table_type" style="width:200px" clearable>
                  <Option v-for="item in tableTypeList" :value="item.value" :key="item.value">
                    {{ item.key }}
                  </Option>
                </Select>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="handleSubmit('formLkyDocumentTableManage')">查询</Button>
                <Button @click="handleReset('formLkyDocumentTableManage')" style="margin-left: 8px">重置</Button>
              </FormItem>
            </Form>
          </div>
        </Panel>
      </Collapse>
      <ButtonGroup style="margin-bottom: 15px;">
        <Button @click="handleOpenPage('add')">上传</Button>
        <Add v-model="isOpenAddPage" @addRow="addLkyDocumentTableManage"/>
        <Edit v-model="isOpenEditPage" @updateRow="updateLkyDocumentTableManage" :lkyDocumentTableManage="editLkyDocumentTableManage"/>
        <Button @click="batchDelete()">批量删除</Button>
      </ButtonGroup>
      <Table
        ref="tableLkyDocumentTableManage"
        :data="tableData"
        :columns="columns"
        @on-selection-change="onSelectionChange"
        @on-sort-change="onSortChange"
      />
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page
            :total="total"
            :current="current"
            :page-size="pageSize"
            @on-page-size-change="changePageSize"
            @on-change="changePage"
            :show-total="true"
            show-sizer
          ></Page>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
  import { list, del, batchDelete} from '@/api/lky/lkyDocumentTableManage'
  import { createFormObj } from '@/libs/util'

  import Add from './add.vue'
  import Edit from './edit.vue'

  export default {
    name: 'LkyDocumentTableManage',
    components: {
      Add,
      Edit
    },
    data () {
      return {
        formLkyDocumentTableManage: {
          id: '',
          file_name: ''
          ,
          file_type: ''
          ,
          period: ''
          ,
          times: null
          ,
          table_type: null
          ,
          start_time: ''
          ,
          end_time: ''
          ,
          update_date: ''
        },
        tableTypeList: [
          {
            key: "老师发布表",
            value: 1
          },
          {
            key: "学生填写表",
            value: 2
          },
          {
            key: "老师评分表",
            value: 3
          },
          {
            key: "教学工作页",
            value: 4
          }
        ],
        columns: [
          { type: 'selection', width: 60, align: 'center' },
          { key: 'file_name', title: '文件名', sortable: true },
          { key: 'period',
            title: '周期',
            sortable: true,
            render: (h, params) => h('span', this.transferPeriod(params.row.period))
          },
          { key: 'times', title: '需填次数', sortable: true },
          { key: 'table_type', title: '表类型', sortable: true, render: (h, params) => h('span', this.transferTableType(params.row.table_type)) },
          { key: 'start_time', title: '开始时间', sortable: true },
          { key: 'end_time', title: '结束时间', sortable: true },
          {
            title: '操作',
            key: 'action',
            width: 250,
            align: 'center',
            render: (h, params) => {
              return h('div', [
				h(
				  'Button',
				  {
				    props: {
				      size: 'small'
				    },
				    style: {
				      marginRight: '5px'
				    },
				    on: {
				      click: () => {
				        this.$router.push({
				          path: '/onlineView/onlineRoutePage',
				          query: {
				            newFileName: params.row.file_name
				          }
				        })
				      }
				    }
				  },
				  '预览'
				),
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.editLkyDocumentTableManage = params.row
                        this.handleOpenPage('edit')
                      }
                    }
                  },
                  '编辑'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '提示',
                          content: '<p>确定删除吗?</p>',
                          onOk: () => {
                            del({ 'lkyDocumentTableManage.id': params.row.id }).then(res => {
                              if (res) {
                                this.tableData.splice(params.index, 1)
                              }
                            })
                          },
                          onCancel: () => {}
                        })
                      }
                    }
                  },
                  '删除'
                )
            ])
            }
          }
        ],
        tableData: [],
        total: 0,
        current: 1,
        pageSize: 10,
        isOpenAddPage: false,
        isOpenEditPage: false,
        editLkyDocumentTableManage: {},
        selection: []
      }
    },
    methods: {
      // 将周期数字转为汉字显示
      transferPeriod(val) {
        console.log(val)
        if (val == 1) {
          return '天'
        } else if (val == 2) {
          return '周'
        } else if (val == 3) {
          return '月'
        } else if (val == 4) {
          return '期'
        } else if (val === 5) {
          return '年'
        }
      },
      transferTableType (val) {
        if (val === 1) {
          return '老师发布表'
        } else if (val === 2) {
          return '学生填写表'
        } else if (val === 3) {
          return '老师评分表'
        } else if (val === 4) {
          return '教学工作页'
        }
      },
      handleSubmit (name) {
        // 查询按钮事件
        this.getLkyDocumentTableManageList(this.current, this.pageSize)
        this.$Message.success('Success!')
      },
      handleReset (name) {
        // 重置按钮事件
        this.$refs[name].resetFields()
      },
      handleOpenPage (name) {
        // 打开页面事件(添加页,编辑页...)
        if (name === 'add') this.isOpenAddPage = true
        else if (name === 'edit') {
          this.isOpenEditPage = true
        }
      },
      addLkyDocumentTableManage (row) {
        this.tableData.push(row)
        this.getLkyDocumentTableManageList(this.current, this.pageSize)
      },
      updateLkyDocumentTableManage (row) {
        this.$set(this.tableData, row._index, row)
        this.getLkyDocumentTableManageList(this.current, this.pageSize)
      },
      batchDelete () {
        this.$Modal.confirm({
          title: '提示',
          content: '<p>确定删除吗?</p>',
          onOk: () => {
            if (this.selection.length > 0) {
              let ids = ''
              for (var i = 0; i < this.selection.length; i++) {
                ids += ',' + this.selection[i].id
              }
              batchDelete({ ids: ids }).then(res => {
                for (var i = 0; i < this.selection.length; i++) {
                  this.tableData = this.tableData.filter(
                    item => item.id !== this.selection[i].id
                  )
                }
              })
            } else {
              this.$Message.error('未选中记录!')
            }
          },
          onCancel: () => {}
        });
      },
      getLkyDocumentTableManageList (current, pageSize, paras) {
        let para = { pageNumber: current, pageSize: pageSize }
        if (paras) Object.assign(para, paras)

        list(this.handleRequestParams(para)).then(res => {
          this.tableData = res.list
          this.current = parseInt(res.pageNumber)
          this.pageSize = parseInt(res.pageSize)
          this.total = parseInt(res.totalRow)
        })
      },
      handleRequestParams (para) {
        Object.assign(para, createFormObj(this.formLkyDocumentTableManage, 'lkyDocumentTableManage'))
        return para
      },
      exportExcel () {
        this.$refs.tableLkyDocumentTableManage.exportCsv({
          filename: `table-${new Date().valueOf()}.csv`
        })
      },
      changePage (pageNumber) {
        this.getLkyDocumentTableManageList(pageNumber, this.pageSize)
      },
      changePageSize (pageSize) {
        this.getLkyDocumentTableManageList(this.current, pageSize)
      },
      remove (index) {
        this.data6.splice(index, 1)
      },
      onSelectionChange (selection) {
        this.selection = selection
      },
      onSortChange (obj) {
        if (obj.order === 'normal') {
          this.getLkyDocumentTableManageList(1, this.pageSize)
        } else {
          this.getLkyDocumentTableManageList(1, this.pageSize, {
            field: obj.key,
            order: obj.order
          })
        }
      }
    },
    mounted () {
      this.getLkyDocumentTableManageList(this.current, this.pageSize)
    }
  }
</script>

<style>
</style>
